<template>
  <a-modal
    :title="title"
    :width="450"
    :visible="visible"
    :closable="false"
    :maskClosable="false">

    <template slot="footer">
      <a-button type="primary" @click="selectOk">确认</a-button>
    </template>

    <a-form-model>
      <a-form-model-item v-if="isMultiDepart" :labelCol="{span:4}" :wrapperCol="{span:20}" style="margin-bottom:10px"
                         :validate-status="validate_status2">
        <a-tooltip placement="topLeft">
          <template slot="title">
            <span>您有多个部门，请选择登录部门</span>
          </template>
          <a-avatar style="backgroundColor:rgb(104, 208, 203);" icon="gold"/>
        </a-tooltip>

        <a-select @change="handleDepartChange" :class="{'valid-error':validate_status2=='error'}" placeholder="请选择登录部门"
                  style="margin-left:10px;width: 80%">
          <a-icon slot="suffixIcon" type="gold"/>
          <a-select-option v-for="d in departList" :key="d.id" :value="d.orgCode">
            {{ d.departName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item v-if="isMultiRole" :labelCol="{span:4}" :wrapperCol="{span:20}" style="margin-bottom:10px"
                         :validate-status="validate_status3">
        <a-tooltip placement="topLeft">
          <template slot="title">
            <span>您有多个角色，请选择角色</span>
          </template>
          <a-avatar style="backgroundColor:rgb(104, 208, 203);" icon="gold"/>
        </a-tooltip>

        <a-select @change="handleRoletChange" :class="{'valid-error':validate_status3=='error'}" placeholder="请选择角色"
                  style="margin-left:10px;width: 80%">
          <a-icon slot="suffixIcon" type="gold"/>
          <a-select-option v-for="d in roleList" :key="d.roleId" :value="d.roleId">
            {{ d.roleName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>


    </a-form-model>
  </a-modal>
</template>

<script>

  import Vue from 'vue'
  import {getAction, putAction} from '@/api/manage'
  import {USER_INFO} from "@/store/mutation-types"
  import store from './Login'

  export default {
    name: 'LoginSelectTenant',
    data() {
      return {
        visible: false,

        isMultiRole: false,
        roleList: [],

        isMultiDepart: false,
        departList: [],

        username: '',
        orgCode: '',
        tenant_id: '',

        validate_status2: "",
        validate_status3: "",
      }
    },
    computed: {
      title() {
        if (this.isMultiDepart) {
          return '请选择部门'
        } else if (this.isMultiRole) {
          return '请选择角色'
        }
      }
    },
    methods: {
      clear() {
        this.departList = []
        this.roleList = []
        this.visible = false
        this.validate_status2 = ''
        this.validate_status3 = ''

      },
      bizRole(loginResult) {
        this.visible = true
        this.isMultiRole = true
        this.roleList = loginResult.roles
      },
      // bizDepart(loginResult) {
      //   let multi_depart = loginResult.multi_depart
      //   //0:无部门 1:一个部门 2:多个部门
      //   if (multi_depart == 0) {
      //     this.$notification.warn({
      //       message: '提示',
      //       description: `您尚未归属部门,请确认账号信息`,
      //       duration: 3
      //     });
      //     this.isMultiDepart = false
      //   } else if (multi_depart == 2) {
      //     this.visible = true
      //     this.isMultiDepart = true
      //     this.departList = loginResult.departs
      //   } else {
      //     this.isMultiDepart = false
      //   }
      // },
      show(loginResult) {
        this.clear();
        // this.bizDepart(loginResult);
        this.bizRole(loginResult)
        let user = Vue.ls.get(USER_INFO)
        this.username = user.username
        if (this.visible === false) {
          this.$emit('success')
        }

      },
      requestFailed(err) {
        this.$notification['error']({
          message: '登录失败',
          description: ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试",
          duration: 4,
        });
        this.loginBtn = false;
      },
      departResolve() {
        return new Promise((resolve, reject) => {
          if (this.isMultiDepart === false) {
            resolve();
          } else {
            let obj = {
              orgCode: this.orgCode,
              username: this.username
            }
            putAction("/sys/selectDepart", obj).then(res => {
              if (res.success) {
                const userInfo = res.result.userInfo;
                Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000);
                this.$store.commit('SET_INFO', userInfo);
                //console.log("---切换组织机构---userInfo-------",store.getters.userInfo.orgCode);
                resolve();
              } else {
                this.requestFailed(res)
                this.$store.dispatch('Logout');
                reject();
              }
            })
          }
        })
      },
      roleResolve() {
        return new Promise((resolve, reject) => {
          if (this.isMultiRole === false) {
            resolve();
          } else {
            let obj = {
              roleId: this.roleId,
            }
            Vue.ls.set('RoleId', this.roleId)
            getAction("/sys/user/updateRoleStatus", obj).then(res => {
              if (res.success) {
                resolve();
              } else {
                this.requestFailed(res)
                this.$store.dispatch('Logout');
                reject();
              }
            })
          }
        })
      },
      selectOk() {
        // if(this.isMultiTenant && !this.tenant_id){
        //   this.validate_status1='error'
        //   return false
        // }
        // if (this.isMultiDepart && !this.orgCode) {
        //   this.validate_status2 = 'error'
        //   return false
        // }
        if (this.isMultiRole && !this.roleId) {
          this.validate_status3 = 'error'
          return false
        }
        this.roleResolve().then(() => {
          this.$emit('success')
        }).catch(() => {
          console.log('登录选择出问题')
        })

        // this.departResolve().then(() => {
        //   this.$store.dispatch('saveTenant', this.tenant_id);
        //   if (this.isMultiTenant) {
        //     this.$emit('success')
        //   } else {
        //     this.$emit('success')
        //   }
        // }).catch(() => {
        //   console.log('登录选择出问题')
        // })
      },
      // handleTenantChange(e){
      //   this.validate_status1 = ''
      //   this.tenant_id = e
      // },
      handleRoletChange(e) {
        this.validate_status3 = ''
        this.roleId = e
      },
      handleDepartChange(e) {
        this.validate_status2 = ''
        this.orgCode = e
      }
    }
  }
</script>

<style scoped>

</style>